<template>
  <div id="app" class="antialiased text-gray-900">
    <NavBar />
    <!-- banner -->
    <div class="flex bg-gray-100">
      <div
        class="px-8 py-12 max-w-md mx-auto sm:max-w-xl lg:w-1/2 lg:max-w-full lg:py-24 lg:px-12"
      >
        <div class="xl:max-w-xl xl:mx-auto">
          <img class="h-10" src="/img/logo.svg" alt="Workcation" />
          <img
            class="lg:hidden mt-6 rounded-lg shadow-xl sm:mt-8 sm:h-100 sm:w-full sm:object-center sm:object-cover"
            src="/img/beach-work.jpg"
            alt="woman workcationing on the beach"
            srcset=""
          />
          <h1
            class="mt-6 text-2xl font-bold text-gray-900 leading-tight sm:text-4xl lg:text-3xl xl:text-4xl"
          >
            You can work from anywhere.
            <br />
            <p class="text-brand-blue mt-2">Take advantage of it.</p>
          </h1>
          <p class="mt-2 text-gray-600 sm:mt-4 sm:text-xl">
            you can work from anywhere.you can work from anywhere.you can work
            from anywhere.you can work from anywhere.you can work from
            anywhere.you can work from anywhere.you can work from anywhere.you
            can work from anywhere.you can work from anywhere.you can work from
            anywhere.you can work from anywhere.
          </p>
          <div class="mt-4 sm:mt-6">
            <a
              href="#"
              class="btn bg-brand-blue text-white shadow-lg sm:text-base"
              >Book your escape</a
            >
            <a
              href="#"
              class="btn btn-gray sm:text-base sm:mt-4 sm:ml-4 ml-0 "
              >Learn more</a
            >
          </div>
        </div>
      </div>
      <div class="hidden lg:block lg:w-1/2 lg:relative">
        <img
          class="absolute inset-0 h-full w-full object-cover object-center"
          src="/img/beach-work.jpg"
          alt="woman workcationing on the beach"
          srcset=""
        />
      </div>
    </div>
    <!-- destination -->
    <div class="bg-gray-200 pb-8">
      <div
        class="max-w-md sm:max-w-xl lg:max-w-6xl mx-auto lg:px-12 py-8 px-8 "
      >
        <h2 class="text-gray-900 text-xl">Popular destinations</h2>
        <p class="text-gray-600">
          A selection of great work-friendly cities with lots to see and
          explore.
        </p>
      </div>
      <div class="flex flex-wrap md:mx-4 lg:mx-0 px-8">
        <div
          class="mt-6 w-full lg:w-1/2 xl:w-1/3 md:px-4 "
          v-for="(destination, index) in popularDestinations"
          :key="index"
        >
          <DestinationCard :destination="destination"></DestinationCard>
        </div>
      </div>
    </div>
    <!-- property -->
    <div class="bg-gray-100 pb-8">
      <div
        class="max-w-md sm:max-w-xl lg:max-w-6xl mx-auto lg:px-12 pt-8 px-8 "
      >
        <h2 class="text-gray-900 text-xl">Popular properties</h2>
        <p class="text-gray-600">
          A selection of great work-friendly cities with lots to see and
          explore.
        </p>
      </div>
      <div class="md:mx-4 lg:mx-0 p-8 flex flex-wrap">
        <PropertyCard
          v-for="(property, index) in propertyArr"
          :key="index"
          :property="property"
          class="mt-6 w-full lg:w-1/2 xl:w-1/3 md:px-4 "
        />
      </div>
    </div>
  </div>
</template>

<script>
import DestinationCard from "./components/DestinationCard.vue";
import PropertyCard from "./components/PropertyCard.vue";
import NavBar from "./components/NavBar.vue";

export default {
  name: "App",
  components: { DestinationCard, PropertyCard, NavBar },
  data() {
    return {
      propertyArr: [
        {
          imageUrl:
            "https://images.unsplash.com/photo-1512917774080-9991f1c4c750?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80",
          imageAlt: "Rear view of modern home with pool",
          beds: 3,
          baths: 2,
          title:
            "Modern home in city center Rear view of modern home with pool",
          priceInCents: 190000,
          formattedPrice: "$1,900.00",
          reviewCount: 34,
          rating: 4,
        },
        {
          imageUrl:
            "https://images.unsplash.com/photo-1512917774080-9991f1c4c750?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80",
          imageAlt: "Rear view of modern home with pool",
          beds: 3,
          baths: 2,
          title:
            "Modern home in city center Rear view of modern home with pool",
          priceInCents: 190000,
          formattedPrice: "$1,900.00",
          reviewCount: 34,
          rating: 4,
        },
        {
          imageUrl:
            "https://images.unsplash.com/photo-1512917774080-9991f1c4c750?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80",
          imageAlt: "Rear view of modern home with pool",
          beds: 3,
          baths: 2,
          title:
            "Modern home in city center Rear view of modern home with pool",
          priceInCents: 190000,
          formattedPrice: "$1,900.00",
          reviewCount: 34,
          rating: 4,
        },
        {
          imageUrl:
            "https://images.unsplash.com/photo-1512917774080-9991f1c4c750?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80",
          imageAlt: "Rear view of modern home with pool",
          beds: 3,
          baths: 2,
          title:
            "Modern home in city center Rear view of modern home with pool",
          priceInCents: 190000,
          formattedPrice: "$1,900.00",
          reviewCount: 34,
          rating: 4,
        },
        {
          imageUrl:
            "https://images.unsplash.com/photo-1512917774080-9991f1c4c750?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80",
          imageAlt: "Rear view of modern home with pool",
          beds: 3,
          baths: 2,
          title:
            "Modern home in city center Rear view of modern home with pool",
          priceInCents: 190000,
          formattedPrice: "$1,900.00",
          reviewCount: 34,
          rating: 4,
        },
        {
          imageUrl:
            "https://images.unsplash.com/photo-1512917774080-9991f1c4c750?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80",
          imageAlt: "Rear view of modern home with pool",
          beds: 3,
          baths: 2,
          title:
            "Modern home in city center Rear view of modern home with pool",
          priceInCents: 190000,
          formattedPrice: "$1,900.00",
          reviewCount: 34,
          rating: 4,
        },
      ],
      popularDestinations: [
        {
          city: "Toronto",
          averagePrice: 120,
          propertyCount: 76,
          imageUrl: "/img/toronto.jpg",
          imageAlt: "Toronto skyline",
        },
        {
          city: "Malibu",
          averagePrice: 215,
          propertyCount: 43,
          imageUrl: "/img/malibu.jpg",
          imageAlt: "Cliff in Malibu",
        },
        {
          city: "Chicago",
          averagePrice: 130,
          propertyCount: 115,
          imageUrl: "/img/chicago.jpg",
          imageAlt: "Chicago skyline",
        },
        {
          city: "Seattle",
          averagePrice: 135,
          propertyCount: 63,
          imageUrl: "/img/seattle.jpg",
          imageAlt: "Seattle skyline",
        },
        {
          city: "Colorado",
          averagePrice: 85,
          propertyCount: 47,
          imageUrl: "/img/colorado.jpg",
          imageAlt: "Lake in Colorado",
        },
        {
          city: "Miami",
          averagePrice: 115,
          propertyCount: 86,
          imageUrl: "/img/miami.jpg",
          imageAlt: "Beach in Miami",
        },
      ],
    };
  },
};
</script>

<style src="./assets/tailwind.css"></style>
